<template>
  <view class="container">
	  <u-navbar zIndex="100" title="设置字体大小" :titleBold="false"></u-navbar>
    <!-- 标题 -->
 <!--   <view class="header">
      <text>预览字体大小</text>
    </view> -->

    <!-- 聊天消息预览 -->
    <view class="chat-preview">
      <view class="message left" :style="{ fontSize: computedFontSize + 'px' }">
        <text>拖动下面滑块,可设置字体大小</text>
   
      </view>
      <view class="message right" :style="{ fontSize: computedFontSize + 'px' }">
        <text>预览字体大小</text>
   
      </view>
      <view class="hint">
        <text>设置后，会改变聊天页面的字体大小</text>
      </view>
    </view>

    <!-- 滑动条 -->
    <view class="slider-container">
      <u-slider 
        v-model="sliderValue" 
        :min="0" 
        :max="100" 
        :active-color="  '#07C160'"
        @changing="handleSliderChange"
      ></u-slider>
    </view>

    <!-- 显示当前字体大小 -->
<!--    <view class="current-size">
      <text>当前大小: {{ computedFontSize }}px</text>
    </view> -->

    <!-- 大小标签 -->
    <view class="size-labels">
      <text 
        v-for="label in labels" 
        :key="label.value" 
        :class="['label', { 'active': currentLabel === label.text }]"
        @click="setFontSize(label.value)">
        {{ label.text }}
      </text>
    </view>

    <!-- 保存按钮 -->
    <view class="save-button">
      <button type="primary" @click="saveFontSize">保存</button>
    </view>
  </view>
</template>

<script>
export default {
data() {
  return {
    sliderValue: 22, // 修改这里为 30
    currentLabel: '默认',
    labels: [
      { text: '默认', value: 18},
      { text: '中号', value: 24 },
      { text: '大号', value: 32 }
    ]
  };
},
  computed: {
    computedFontSize() {
      return Math.round(14 + (32 - 14) * (this.sliderValue / 100));
    }
  },
  methods: {
    handleSliderChange(value) {
      const fontSize = this.computedFontSize;
      if (fontSize <= 18) {
        this.currentLabel = '默认';
      } else if (fontSize <= 28) {
        this.currentLabel = '中号';
      } else {
        this.currentLabel = '大号';
      }
    },
setFontSize(fontSize) {
  if (fontSize === 18) {
    this.sliderValue = 22; // 点击默认时设置为 22
  } else {
    this.sliderValue = Math.round((fontSize - 14) / (32 - 14) * 100);
  }
  this.currentLabel = this.labels.find(l => l.value === fontSize)?.text || '';
},
    saveFontSize() {
      uni.showToast({
        title: `已保存字体大小为 ${this.computedFontSize}px`,
        icon: 'none'
      });
      uni.setStorageSync("fontSize", this.computedFontSize);
    }
  },
  mounted() {
    // 如果需要在页面加载时将字体大小强制设置为14px并更新滑块位置，取消下面注释
    // this.setFontSize(14);
  }
};
</script>


<style scoped>
/* 样式保持不变 */
.container {
  padding: 20px;
  /* background-color: #f5f5f5; */
  height: 100vh;
}

.header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.chat-preview {
  /* background-color: #fff; */
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.message {
  padding: 10px 15px;
  max-width: 70%;
  margin: 8px 0;
  border-radius: 12px;
  position: relative;
  transition: font-size 0.2s ease;
  word-break: break-all;
}

.left {
  background-color: #feffff;
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
}

.right {
  background-color: #cfe8fe;
  color: black;
  align-self: flex-end;
  margin-left: auto;
  margin-right: 0;
}

.time {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
  display: block;
}

.hint {
  font-size: 14px;
  color: #999;
  text-align: center;
  padding: 10px 0;
  margin: 10px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.slider-container {
  padding: 0 20px;
  margin-bottom: 20px;
}

.size-labels {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
}

.label {
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 15px;
  font-size: 14px;
  color: #666;
}

.label.active {
  background-color: #07C160;
  color: white;
  border-color: #07C160;
}

.save-button {
  margin-top: 20px;
}
</style>